<template>
  <div class="projectAdd" v-loading="detailInfoShow">
    <!-- 筛选按钮 -->
    <div class="search-button" v-if="!contactAddShow && !saleAddShow">
      <el-button
        v-if="pageType === 'check' && route.name === 'WorkCheck'"
        class="btn save"
        @click="handleCheckBtn2(projectFormRef, 3, '同意')"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >同意</el-button
      >
      <el-button
        v-if="pageType === 'check' && route.name === 'WorkCheck'"
        class="btn withdraw"
        @click="handleCheckBtn2(projectFormRef, 4, '拒绝')"
        ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
        >拒绝</el-button
      >
      <el-button
        v-if="pageType === 'check' && route.name === 'WorkCheck'"
        class="btn withdraw"
        @click="handleCheckBtn2(projectFormRef, 6, '驳回')"
        ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
        >驳回</el-button
      >
      <el-button
        v-if="pageType !== 'detail' && pageType !== 'check'"
        class="btn submit"
        @click="handleAddSave(projectFormRef, 1)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >提交</el-button
      >
      <el-button
        v-if="activeName == 'approval' && flowInfoList.length"
        @click="handleEvaluate()"
        class="btn save"
        ><el-icon class="icon" color="#fff"> <Comment /> </el-icon
        >评论</el-button
      >
      <el-button
        v-if="activeName == 'approval' && flowInfoList.length"
        @click="handlePrint()"
        v-print="prints"
        class="btn add"
        ><el-icon class="icon" color="#fff"> <Printer /> </el-icon
        >打印</el-button
      >
      <el-button class="btn direction" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>
    <el-tabs
      type="border-card"
      v-model="activeName"
      v-if="pageType === 'detail'"
    >
      <el-tab-pane label="工单信息" name="info">
        <el-collapse v-model="activeNames">
          <!-- 基础信息 -->
          <el-collapse-item
            name="1"
            v-if="!contactAddShow && !saleAddShow"
            class="transform-down"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title"
                >{{
                  pageType === "detail"
                    ? ""
                    : pageType === "add"
                    ? "新增"
                    : pageType === "edit"
                    ? "编辑"
                    : "审核"
                }}工单信息</span
              >
            </template>
            <div class="project-info">
              <el-form
                :model="projectForm"
                ref="projectFormRef"
                :rules="queryRules"
                label-width="120px"
                v-enterToNext
                :disabled="pageType === 'detail' || pageType === 'check'"
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="申请人：">
                      <el-input
                        v-model="projectForm.applicantName"
                        placeholder="自动获取"
                        clearable
                        class="search-input"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="申请部门：" label-width="120">
                      <el-input
                        v-model="projectForm.deptName"
                        placeholder="自动获取"
                        clearable
                        class="search-input"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="创建时间：">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="projectForm.createTime"
                        class="search-input"
                        type="datetime"
                        placeholder="自动获取"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="工单名称："
                      prop="workOrderName"
                      label-width="120"
                    >
                      <el-input
                        maxlength="10"
                        v-model="projectForm.workOrderName"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="选择部门：" prop="businessDeptId">
                      <el-select
                        filterable
                        v-model="projectForm.businessDeptId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleDepart"
                      >
                        <el-option
                          v-for="dict in deptList"
                          :key="dict.deptId"
                          :label="dict.deptName"
                          :value="dict.deptId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="业务人员：" prop="userId">
                      <el-select
                        v-model="projectForm.userId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        filterable
                      >
                        <el-option
                          v-for="dict in userList"
                          :key="dict.userId"
                          :label="dict.nickName"
                          :value="dict.userId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="7">
                    <el-form-item
                      label-width="120"
                      label="项目地址："
                      prop="city"
                    >
                      <el-select
                        filterable
                        style="width: 93px"
                        v-model="projectForm.province"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleProvince('province')"
                      >
                        <el-option
                          v-for="dict in provinceList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <el-select
                        filterable
                        style="width: 93px; margin: 0 5px"
                        v-model="projectForm.city"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleProvince('city')"
                      >
                        <el-option
                          v-for="dict in cityList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <el-select
                        filterable
                        style="width: 93px"
                        v-model="projectForm.area"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in areaList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item
                      label="详细地址："
                      prop="address"
                      label-width="100"
                    >
                      <el-input
                        maxlength="30"
                        style="width: 100%"
                        v-model="projectForm.address"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span="6">
                    <el-form-item
                      label="施工完结时间："
                      prop="finishTime"
                      label-width="120"
                    >
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="projectForm.finishTime"
                        class="search-input"
                        type="datetime"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="是否有项目：" prop="isProject">
                      <el-select
                        v-model="projectForm.isProject"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in flagList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6" v-if="projectForm.isProject === 1">
                    <el-form-item
                      label="项目名称："
                      prop="projectName"
                      label-width="120"
                    >
                      <el-select
                        filterable
                        v-model="projectForm.projectId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleProjectChange"
                      >
                        <el-option
                          v-for="dict in projectList"
                          :key="dict.projectId"
                          :label="dict.projectName"
                          :value="dict.projectId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="projectForm.isProject === 1">
                    <el-form-item label="项目编号：">
                      <el-input
                        v-model="projectForm.projectCode"
                        placeholder="回显项目编号"
                        clearable
                        class="search-input"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
<!--                  <el-col :span="6" v-if="projectForm.isProject === 1">-->
<!--                    <el-form-item label="选择防区：">-->
<!--                      <el-select-->
<!--                        v-model="projectForm.armedzoneId"-->
<!--                        placeholder="请选择"-->
<!--                        clearable-->
<!--                        filterable-->
<!--                        class="search-input"-->
<!--                        @change="getArmedzoneDevice"-->
<!--                      >-->
<!--                        &lt;!&ndash; @change="handleDefenseChange" &ndash;&gt;-->
<!--                        <el-option-->
<!--                          v-for="dict in defenseList"-->
<!--                          :key="dict.id"-->
<!--                          :label="dict.armedzoneName"-->
<!--                          :value="dict.id"-->
<!--                        />-->
<!--                      </el-select>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :span="6" v-if="projectForm.isProject === 1">
                    <el-form-item label="选择点位：">
                      <el-select
                        filterable
                        multiple
                        placement="bottom-end"
                        v-model="projectForm.projectTaskDetailIds"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <!-- <el-option
                      v-for="dict in projectList"
                      :key="dict.projectId"
                      :label="dict.projectName"
                      :value="dict.projectId"
                    /> -->
                        <el-option key="0" label="" value="" disabled>
                          <span style="float: left; color: #8492a6"
                            >点位名称</span
                          >
                          <span style="margin: 0 80px 0 110px; color: #8492a6"
                            >物业名称</span
                          >
                          <span
                            style="
                              margin: 0 100px 0 0px;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >物业联系方式</span
                          >
                          <span style="color: #8492a6; font-size: 13px"
                            >民警联系方式</span
                          >
                        </el-option>
                        <el-option
                          v-for="item in pointList"
                          :key="item.projectTaskDetailId"
                          :label="item.pointAdd"
                          :value="item.projectTaskDetailId"
                        >
                          <span
                            style="
                              display: inline-block;
                              width: 140px;
                              float: left;
                            "
                            >{{ item.pointAdd }}</span
                          >
                          <span
                            style="
                              display: inline-block;
                              width: 125px;
                              margin: 0 15px 0 23px;
                              color: #8492a6;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                            "
                            >{{
                              item.propertyName ? item.propertyName : "--"
                            }}</span
                          >
                          <span
                            style="
                              display: inline-block;
                              width: 150px;
                              font-size: 13px;
                              margin: 0 0px 0 0px;
                              transform: translateY(-11px);
                              color: #8492a6;
                            "
                          >
                            {{ item.propertyWay }}
                          </span>
                          <span
                            style="
                              display: inline-block;
                              margin: 0 0px 0 0px;
                              font-size: 13px;
                              transform: translateY(-11px);
                              color: #8492a6;
                            "
                          >
                            {{ item.policeWay ? item.policeWay : "--" }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24" v-if="projectForm.isProject === 1">
                    <el-form-item label="防区设备：">
                      <div v-if="deviceList.length > 0" class="tag tag-box">
                        <el-tag
                          v-for="(tag, index) in deviceList"
                          :key="index"
                          :disable-transitions="false"
                          style="margin-right: 4px"
                        >
                          {{ tag.armedzoneName.split(":")[0] }}
                        </el-tag>
                      </div>
                      <div v-else class="tag tag-box">
                        <i
                          style="
                            color: gray;
                            font-style: inherit;
                            font-size: 14px;
                          "
                        >
                          暂无设备
                        </i>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item
                      label="工单类型："
                      prop="workOrderType"
                      label-width="120"
                    >
                      <el-select
                        v-model="projectForm.workOrderType"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in typeList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="期望开始时间：" prop="desireStartTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="projectForm.desireStartTime"
                        class="search-input"
                        type="datetime"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="期望结束时间：" prop="desireEndTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="projectForm.desireEndTime"
                        class="search-input"
                        type="datetime"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工单描述：" prop="remark">
                      <el-input
                        maxlength="2000"
                        style="width: 100%"
                        v-model="projectForm.remark"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 添加防区点位负责联系人 -->
          <el-collapse-item
            name="2"
            style="position: relative"
            v-if="saleAddShow && !contactAddShow"
            class="transform-up"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">添加防区点位负责联系人</span>
            </template>
            <div class="project-info">
              <el-form
                :model="saleForm"
                ref="saleFormRef"
                :rules="querySaleRules"
                label-width="100px"
                v-enterToNext
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="联系人：" prop="name">
                      <el-input
                        v-model="saleForm.name"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系方式：" prop="tel">
                      <el-input
                        v-model="saleForm.tel"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注：" prop="remark">
                      <el-input
                        maxlength="2000"
                        style="width: 96.2%"
                        v-model="saleForm.remark"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                        @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 防区点位负责联系人明细 -->
          <el-collapse-item
            name="3"
            style="position: relative"
            v-show="!contactAddShow"
            class="transform-down"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">防区点位负责联系人</span>
              <div
                v-if="
                  pageType !== 'detail' && pageType !== 'check' && !saleAddShow
                "
                class="nofixed-search-button button-position"
              >
                <el-button class="btn add" @click.stop="handleSaleOperate"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
              </div>
              <div
                class="nofixed-search-button button-position"
                v-else
                v-if="pageType !== 'detail' && pageType !== 'check'"
              >
                <el-button
                  class="btn add"
                  @click.stop="handleSaleAdd(saleFormRef)"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
                <el-button class="btn direction" @click.stop="handleSaleBack"
                  ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                  >关闭</el-button
                >
              </div>
            </template>
            <div class="contact-info">
              <!-- 表格数据 -->
              <el-table
                :data="projectForm.concatList"
                border
                :height="
                  pageType === 'detail'
                    ? '100%'
                    : contactAddShow
                    ? '490px'
                    : '280px'
                "
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <!-- 操作模式 -->
                <el-table-column
                  label="操作"
                  align="center"
                  :show-overflow-tooltip="true"
                  width="100px"
                  v-if="pageType !== 'detail' && pageType !== 'check'"
                >
                  <!-- v-if="!operateType" -->
                  <template #default="{ row, $index }">
                    <div class="table-operate">
                      <img
                        src="@/assets/icons/images/edit.png"
                        class="table-icon"
                        title="编辑"
                        @click="handleOperateSec('edit', row, $index)"
                      />
                      <img
                        src="@/assets/icons/images/delete.png"
                        class="table-icon"
                        title="删除"
                        @click="handleOperateSec('delete', row, $index)"
                      />
                    </div> </template
                ></el-table-column>
                <el-table-column
                  label="联系人"
                  prop="name"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="联系方式"
                  prop="contactsPhone"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="备注"
                  prop="remark"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="审批进度" name="approval">
        <template v-if="auditList.length">
          <div class="contact-info" id="print-iframe">
            <!-- 步骤栏 -->
            <div :class="!printFlag ? 'steps-box' : 'steps-print-box '">
              <el-steps
                :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                :active="flowingStep"
                finish-status="success"
              >
                <el-step v-for="(item, index) in flowInfoList" :key="index">
                  <template #title>
                    <span :title="item.name">
                      {{ item.name }}
                    </span>
                  </template>
                  <template #description>
                    <div>
                      <p class="ription">{{ item.auditDate }}</p>
                      <p class="ription">{{ item.auditEmp }}</p>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>

            <!-- 表格数据 -->
            <el-table
              :data="auditList"
              border
              :height="'100%'"
              :header-cell-style="{ 'text-align': 'center' }"
              sum-text=""
            >
              <!-- 操作模式 -->
              <el-table-column label="流程节点" prop="name" min-width="120">
              </el-table-column>
              <el-table-column
                label="审核人"
                prop="createUserName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核时间"
                prop="createTime"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核意见"
                prop="resultName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column label="审核备注" prop="remark" min-width="120">
              </el-table-column>
            </el-table>
          </div>
          <!-- 评论 -->
          <el-table
            style="margin-top: 60px"
            :data="evaluateList"
            border
            :height="'100%'"
            :header-cell-style="{ 'text-align': 'center' }"
            sum-text=""
          >
            <!-- 操作模式 -->
            <el-table-column label="评论内容" prop="content" min-width="500">
            </el-table-column>
            <el-table-column
              label="评论人"
              prop="createUserName"
              min-width="120"
            >
            </el-table-column>
            <el-table-column label="评论时间" prop="createTime" min-width="120">
            </el-table-column>
          </el-table>
        </template>
        <div v-else>暂无审核</div>
      </el-tab-pane>
      <el-tab-pane label="实施进度" name="approval2">
        <el-collapse v-model="activeNames" v-if="route.name === 'WorkApply'">
          <!-- 基础信息 -->
          <el-collapse-item name="1" class="transform-down">
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">分配信息</span>
            </template>
            <div class="project-info">
              <el-form
                :model="impleForm"
                ref="followFormRef"
                :rules="queryRules"
                label-width="120px"
                v-enterToNext
                :disabled="pageType === 'detail'"
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="任务名称：">
                      <el-input
                        disabled
                        v-model="impleForm.maintanceTaskName"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="分配人：" prop="allotRelList">
                      <el-input
                        disabled
                        v-model="impleForm.executors"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="分配时间：" prop="allotRelList">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="impleForm.createTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="计划开始时间：" prop="startTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="impleForm.startTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="计划结束时间：" prop="endTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="impleForm.endTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注：">
                      <el-input
                        maxlength="2000"
                        style="width: 100%"
                        v-model="impleForm.remark"
                        type="textarea"
                        placeholder="--"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 跟进记录 -->
          <el-collapse-item name="2" class="transform-down">
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">施工信息</span>
            </template>
            <div class="project-info">
              <el-form
                :model="constForm"
                label-width="120px"
                v-enterToNext
                :disabled="pageType === 'detail'"
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="工程师：">
                      <el-input
                        disabled
                        v-model="constForm.executors"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="分配时间：" prop="allotRelList">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="constForm.createTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="实际开始时间：" prop="startTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="constForm.actualStartTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="实际结束时间：" prop="endTime">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="constForm.finishTime"
                        class="search-input"
                        type="datetime"
                        placeholder="--"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="交付物：">
                      <Upload
                        :fileList="constForm.suppFileInfoVos"
                        :limit="1"
                        limitation="templatelimitation"
                        accept=".doc,.docx"
                        :isFull="true"
                        :isCanDelete="false"
                        :showButton="false"
                        :disabled="true"
                        @success="(result) => uploadSuccess(result)"
                        @deleteFile="(result) => uploadRemove(result)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="故障类型：">
                      <el-input
                        disabled
                        v-model="constForm.faultTypeName"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="反馈情况：">
                      <el-input
                        disabled
                        v-model="constForm.feedbackName"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="申请物料：">
                      <el-input
                        disabled
                        v-model="constForm.erpDeliveryApplies"
                        placeholder="--"
                        clearable
                        style="width: 100%"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工单关结描述：">
                      <el-input
                        style="width: 100%"
                        v-model="constForm.workDesc"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div v-else>
          <el-timeline style="max-width: 600px">
            <el-timeline-item v-for="(item, index) in impleList" :key="index">
              <!-- :timestamp="item.maintanceTaskName" -->
              <div class="header">
                {{
                  item.operationType == 1
                    ? "退回记录"
                    : item.operationType == 3
                    ? "施工信息"
                    : "分配信息"
                }}
              </div>
              <div v-if="item.operationType == 0">
                <div class="item">
                  <span class="title">任务名称:</span>
                  {{ item.maintanceTaskName }}
                </div>
                <div class="item">
                  <span class="title">分配时间:</span> {{ item.createTime }}
                </div>
                <div class="item">
                  <span class="title">分配人:</span> {{ item.executors }}
                </div>
                <div class="item">
                  <span class="title">计划开始时间:</span> {{ item.startTime }}
                </div>
                <div class="item">
                  <span class="title">计划结束时间:</span> {{ item.endTime }}
                </div>
                <div class="item">
                  <span class="title">备注:</span> : {{ item.remark }}
                </div>
              </div>
              <div v-if="item.operationType == 1">
                <div class="item">
                  <span class="title">退回时间:</span> {{ item.createTime }}
                </div>
                <div class="item">
                  <span class="title">退回原因:</span> :
                  {{ item.returnReasons }}
                </div>
              </div>
              <div v-if="item.operationType == 3">
                <!-- <div class="item"><span class="title">任务名称:</span> {{ item.maintanceTaskName }}</div> -->
                <div class="item">
                  <span class="title">工程师:</span> {{ item.executors }}
                </div>
                <div class="item">
                  <span class="title">分配时间:</span> {{ item.createTime }}
                </div>
                <div class="item">
                  <span class="title">实际开始时间:</span> {{ item.startTime }}
                </div>
                <div class="item">
                  <span class="title">实际结束时间:</span> {{ item.endTime }}
                </div>
                <div class="item">
                  <span class="title">故障类型:</span>
                  {{ item.faultTypeName ? item.faultTypeName : "无" }}
                </div>
                <div class="item">
                  <span class="title">反馈情况:</span> :
                  {{ item.feedbackName ? item.feedbackName : "无" }}
                </div>
                <div class="item">
                  <span class="title">工单关结描述:</span> : {{ item.workDesc }}
                </div>
                <div class="item">
                  <div style="display: flex; align-items: center">
                    <span class="title" style="width: 90px">交付文件:</span>
                    <Upload
                      :fileList="item.suppFileInfoVos"
                      :limit="1"
                      limitation="templatelimitation"
                      accept=".doc,.docx"
                      :isFull="true"
                      :isCanDelete="false"
                      :showButton="false"
                      :disabled="true"
                    />
                  </div>
                </div>
                <div class="item">
                  <span class="title">申请物料:</span>
                  <template
                    v-if="
                      item.erpDeliveryApplies && item.erpDeliveryApplies.length
                    "
                  >
                    <span
                      v-for="(child, index) in item.erpDeliveryApplies"
                      :key="index"
                    >
                      {{ child.deliveryApplyCode
                      }}<span
                        v-if="index + 1 !== item.erpDeliveryApplies.length"
                        >,</span
                      >
                    </span>
                  </template>
                  <span v-else>无</span>
                </div>
              </div>
            </el-timeline-item>
            <div v-if="impleList.length === 0" style="margin-left:-30px">
            暂无数据</div>
          </el-timeline>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-collapse v-model="activeNames" v-else>
      <!-- 基础信息 -->
      <el-collapse-item
        name="1"
        v-if="!contactAddShow && !saleAddShow"
        class="transform-down"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">申请信息</span>
        </template>
        <div class="project-info">
          <el-form
            :model="projectForm"
            ref="projectFormRef"
            :rules="queryRules"
            label-width="120px"
            v-enterToNext
            :disabled="pageType === 'detail' || pageType === 'check'"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                    label="工单名称："
                    prop="name"
                    label-width="120"
                >
                  <el-input
                      maxlength="10"
                      v-model="projectForm.name"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                    label="工单类型："
                    prop="type"
                    label-width="120"
                >
                  <el-select
                      v-model="projectForm.type"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                  >
                    <el-option
                        v-for="dict in typeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                    label="项目名称："
                    prop="projectId"
                    label-width="120"
                >
                  <el-select
                      filterable
                      v-model="projectForm.projectId"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      @change="handleProjectChange"
                  >
                    <el-option key="0" label="" value="" disabled>
                      <span style="float: left; color: #8492a6">项目编号</span>
                      <span style="margin: 0 80px 0 110px; color: #8492a6"
                      >项目名称</span
                      >
                      <span
                          style="
                          margin: 0 100px 0 0px;
                          color: #8492a6;
                          font-size: 13px;
                        "
                      >项目类别</span
                      >
                      <span style="color: #8492a6; font-size: 13px"
                      >项目类型</span
                      >
                    </el-option>
                    <el-option
                        v-for="item in projectList"
                        :key="item.projectId"
                        :label="item.projectName"
                        :value="item.projectId"
                    >
                      <span
                          style="display: inline-block; width: 140px; float: left"
                      >{{ item.projectCode }}</span
                      >
                      <span
                          style="
                          display: inline-block;
                          width: 125px;
                          margin: 0 15px 0 23px;
                          color: #8492a6;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >{{ item.projectName ? item.projectName : "--" }}</span
                      >
                      <span
                          style="
                          display: inline-block;
                          width: 150px;
                          font-size: 13px;
                          margin: 0 0px 0 0px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                      >
                        {{ item.projectCategoryName }}
                      </span>
                      <span
                          style="
                          display: inline-block;
                          margin: 0 0px 0 0px;
                          font-size: 13px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                      >
                        {{ item.projectTypeName ? item.projectTypeName : "--" }}
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="projectTableVisible">
              <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
              >
                <el-descriptions-item
                    label="项目编号"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.projectCode ? projectTableVisible.projectCode : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="所属行业"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.industryName ? projectTableVisible.industryName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="所属公司"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.companyName ? projectTableVisible.companyName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="业务人员"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.businessName ? projectTableVisible.businessName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="项目类型"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.projectTypeName ? projectTableVisible.projectTypeName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="项目种类"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.projectCategoryName ? projectTableVisible.projectCategoryName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="项目起止时间"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.startTime+'至'+projectTableVisible.endTime }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="关联客户"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.customerName ? projectTableVisible.customerName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="项目执行地"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.executiveAddress ? projectTableVisible.executiveAddress : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="详细地址"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.address ? projectTableVisible.address : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="项目金额"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.moneyName ? projectTableVisible.moneyName : '--' }}元
                </el-descriptions-item>
                <el-descriptions-item
                    label="是否签合同"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.includeContractName ? projectTableVisible.includeContractName : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="使用单位"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.endUseUnit ? projectTableVisible.endUseUnit : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="使用单位联系人"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                <template v-if="projectTableVisible.unitContact">
                    {{ projectTableVisible.unitContact }}
                  </template>
                  <template v-else> -- </template>
                 
                </el-descriptions-item>
                <el-descriptions-item
                    label="质保起止时间"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.warrantyStartTime ? projectTableVisible.warrantyStartTime : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="质保终止时间"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.warrantyEndTime ? projectTableVisible.warrantyEndTime : '--' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="备注"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                >
                  {{ projectTableVisible.remarks ? projectTableVisible.remarks : '--' }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item
                    label="问题描述："
                    prop="remark"
                    label-width="120"
                >
                  <el-input
                      v-model="projectForm.remark"
                      type="textarea"
                      maxlength="500"
                      placeholder="请填写（具体问题、防区点位、设备等）"
                      show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 添加防区点位负责联系人 -->
      <el-collapse-item
        name="2"
        style="position: relative"
        v-if="saleAddShow && !contactAddShow"
        class="transform-up"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">添加防区点位负责联系人</span>
        </template>
        <div class="project-info">
          <el-form
            :model="saleForm"
            ref="saleFormRef"
            :rules="querySaleRules"
            label-width="100px"
            v-enterToNext
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="联系人：" prop="name">
                  <el-input
                    maxlength="10"
                    v-model="saleForm.name"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式：" prop="tel">
                  <el-input
                    maxlength="11"
                    v-model="saleForm.tel"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    maxlength="2000"
                    style="width: 96.2%"
                    v-model="saleForm.remark"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 防区点位负责联系人明细 -->
      <el-collapse-item
        name="3"
        style="position: relative"
        v-show="!contactAddShow"
        class="transform-down"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">防区点位负责联系人</span>
          <div
            v-if="pageType !== 'detail' && pageType !== 'check' && !saleAddShow"
            class="nofixed-search-button button-position"
          >
            <el-button class="btn add" @click.stop="handleSaleOperate"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
          </div>
          <div
            class="nofixed-search-button button-position"
            v-else
            v-if="pageType !== 'detail' && pageType !== 'check'"
          >
            <el-button class="btn add" @click.stop="handleSaleAdd(saleFormRef)"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
            <el-button class="btn direction" @click.stop="handleSaleBack"
              ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
              >关闭</el-button
            >
          </div>
        </template>
        <div class="contact-info">
          <!-- 表格数据 -->
          <el-table
            :data="projectForm.concatList"
            border
            :height="
              pageType === 'detail'
                ? '100%'
                : contactAddShow
                ? '490px'
                : '280px'
            "
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <!-- 操作模式 -->
            <el-table-column
              label="操作"
              align="center"
              :show-overflow-tooltip="true"
              width="100px"
              v-if="pageType !== 'detail' && pageType !== 'check'"
            >
              <!-- v-if="!operateType" -->
              <template #default="{ row, $index }">
                <div class="table-operate">
                  <img
                    src="@/assets/icons/images/edit.png"
                    class="table-icon"
                    title="编辑"
                    @click="handleOperateSec('edit', row, $index)"
                  />
                  <img
                    src="@/assets/icons/images/delete.png"
                    class="table-icon"
                    title="删除"
                    @click="handleOperateSec('delete', row, $index)"
                  />
                </div> </template
            ></el-table-column>
            <el-table-column
              label="联系人"
              prop="name"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="联系方式"
              prop="tel"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="备注"
              prop="remark"
              :show-overflow-tooltip="true"
              min-width="160"
            />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      :title="title"
      v-model="auditDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="审核备注：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="auditRemark"
          placeholder=""
          type="textarea"
          maxlength="2000"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            v-if="auditResult == 3"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >同意</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 4"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >拒绝</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 6"
            @click="saveCheck()"
            v-loading="loadingCheck"
          >
            驳回</el-button
          >
          <el-button style="background-color: #fff" @click="closeAudit()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
    <el-dialog
      :title="''"
      v-model="evaluateDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="评论内容：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="evaluateInfo"
          placeholder=""
          type="textarea"
          rows="5"
          maxlength="500"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            @click="saveEvaluate()"
            >保存</el-button
          >

          <el-button style="background-color: #fff" @click="closeEvaluate()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <el-dialog
      :title="operateType !== 'edit' ? '添加联系人' : '编辑联系人'"
      v-model="operateDialogShow"
      style="margin-top: 20vh !important"
      width="1400px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :close="handleSaleBack"
    >
      <div>
        <el-form
            :model="saleForm"
            ref="saleFormRef"
            :rules="querySaleRules"
            label-width="100px"
            v-enterToNext
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="联系人：" prop="name">
                  <el-input
                    maxlength="10"
                    v-model="saleForm.name"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式：" prop="tel">
                  <el-input
                    maxlength="11"
                    v-model="saleForm.tel"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    maxlength="2000"
                    style="width: 96.2%"
                    v-model="saleForm.remark"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
      </div>
      <template #footer>
        <!--  class="customer-info" -->

        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            @click="handleSaleAdd(saleFormRef)"
            >保存</el-button
          >

          <el-button style="background-color: #fff" @click="handleSaleBack()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Upload from "@/components/Upload/index";
import { getDeptListApi } from "@/api/information/customer";
import { getProvinceApi, getCustomerListApi } from "@/api/information/customer";
import { addEvaluateApi, getEvaluateListApi } from "@/api/pub.js";
import {
  addProjectApi,
  getProjectApi,
  editProjectApi,
  checkProjectApi,
} from "@/api/sales/project";
import {
  getProjectListApi,
  addWorkApplyApi,
  editWorkApplyApi,
  getWorkApplyDetailApi,
  checkWorkApi,
  getUserListApi,
  selectAuditList,
  getPorjectPointListApi,
  getSelectProjectInfoApi
} from "@/api/operation/work";
import {
  getArmedzoneInfoVoListApi,
  getArmedzoneDeviceApi,
} from "@/api/operation/flightdata.js";

import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();
const emit = defineEmits([
  // 项目新增组件显隐
  "projectAddShow",
  // 更新项目新增组件显隐
  "update:projectAddShow",
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "updateFollowAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
const activeName = ref("info");
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3", "4", "5"]);
// 客户表单引用
const projectFormRef = ref();
// 联系人表单引用
const contactFormRef = ref();
// 销售表单引用
const saleFormRef = ref();
// 联系人操作类型
const operateType = ref("");
// 详情加载效果
const detailInfoShow = ref(false);
// 新增编辑弹窗显隐
const operateDialogShow = ref(false);
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 销售清单当前索引(编辑销售清单使用)
const tableIndexSec = ref(null);
// 输入框引用
const refInput = ref();
// 联系人输入框引用
const contactRefInput = ref();
// 下拉框引用
const refSelect = ref();
// 销售项目类目列表
const saleCategoryList = ref([]);
//防区下拉
let defenseList = ref([]);
// 是否签合同列表
const contractList = ref([]);
// 是否中标列表
const successfulList = ref([]);
// 项目状态列表
const statusList = ref([]);
// 项目类型列表
const typeList = ref([]);
// 客户列表
const customerList = ref([]);
// 设备列表
const deviceList = ref([]);
// 点位列表
const pointList = ref([]);
// 新增联系人表单显隐
const contactAddShow = ref(false);
// 新增销售列表表单显隐
const saleAddShow = ref(false);

let auditList = ref([]);

//审核进度数据
const flowInfoList = ref([]);
//当前进度
const flowingStep = ref(0);
// 实施表单
const impleForm = ref({ suppFileInfoVos: [] });
// 实施列表
const impleList = ref([]);

// 选择审核
const auditDialogShow = ref(false);
const loadingCheck = ref(false);

// 评论
const evaluateDialogShow = ref(false);
// 评论内容
const evaluateInfo = ref("");
// 评论列表
const evaluateList = ref([]);
// 根据项目名称选择显示的表格
const projectTableVisible = ref(false);
//
const projectTableObj = ref({});

// 施工
const constForm = ref({ suppFileInfoVos: [] });
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  const { province, city, area } = projectForm.value;
  if (!province || !city || !area) {
    callback(new Error("请选择省市区"));
  } else {
    callback();
  }
};
// 项目表单模板
const projectFormTemplate = {
  name: "",
  type: "",
  projectId: "",
  remark: "",
  concatList: []
};
const data = reactive({
  // 项目表单
  projectForm: JSON.parse(JSON.stringify(projectFormTemplate)),
  // 联系人表单
  contactForm: {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  },
  // 销售清单表单
  saleForm: {
    name: "",
    tel: "",
    orderContactsId: null,
    workOrderId: null,
    remark: "",
  },
  // 项目表单校验规则
  queryRules: {
    name: [
      { required: true, message: "请输入工单名称", trigger: "blur" },
    ],
    type: [
      { required: true, message: "请选择工单类型", trigger: "blur" },
    ],
    projectId: [
      { required: true, message: "请选择项目名称", trigger: "change" },
    ],
    remark: [{ required: true, message: "请输入工单描述", trigger: "blur" }],
  },
  // 销售清单表单校验规则
  querySaleRules: {
    name: [
      { required: true, message: "请输入联系人", trigger: "blur" },
    ],
    tel: [
      { required: true, message: "请输入联系方式", trigger: "blur" },
    ],
    remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
  },
  // 省列表
  provinceList: [],
  // 市列表
  cityList: [],
  // 区列表
  areaList: [],
  // 用户列表
  userList: [],
  // 项目列表
  // 部门列表
  deptList: [],
  projectList: [],
  flagList: [
    {
      label: "是",
      value: 1,
    },
    {
      label: "否",
      value: 0,
    },
  ],
  auditRemark: "",
  auditResult: "",
  applyId: "",
});
const {
  projectForm,
  contactForm,
  saleForm,
  queryRules,
  querySaleRules,
  provinceList,
  cityList,
  areaList,
  userList,
  deptList,
  flagList,
  projectList,
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);

import print from "vue3-print-nb";

// 使用自定义指令
const vPrint = print;
const printFlag = ref(false);

let prints = {
  id: "print-iframe",
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "预览的标题", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  // 开始打印之前的callback
  beforeOpenCallback() {
    console.log("开始打印之前！");
  },
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
    printFlag.value = false;
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
  standard: "",
  extarCss: "",
};

const handlePrint = () => {
  printFlag.value = true;
};

// 处理评论按钮点击
const handleEvaluate = () => {
  evaluateDialogShow.value = true;
};

// 保存评论
const saveEvaluate = async () => {
  if (!evaluateInfo.value) return ElMessage.info("请输入评论内容！");
  const data = {
    businessId: projectForm.value.workOrderId,
    content: evaluateInfo.value,
    modelType: 12,
  };
  const result = await addEvaluateApi(data);
  if (result.code === 200) {
    ElMessage.success(result.msg);
    evaluateDialogShow.value = false;
    evaluateInfo.value = "";
    getEvaluateList();
  }
};

// 关闭评论弹窗
const closeEvaluate = () => {
  evaluateDialogShow.value = false;
  evaluateInfo.value = "";
};

// 获取评价列表
const getEvaluateList = async () => {
  const data = {
    businessId: projectForm.value.workOrderId,
    modelType: 12,
  };
  const result = await getEvaluateListApi(data);
  evaluateList.value = result.data || [];
};

const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 3) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  (applyId.value = projectForm.value.workOrderId),
    (auditDialogShow.value = true);
  loadingCheck.value = false;
};

const saveCheck = async () => {
  if (auditRemark.value === null || auditRemark.value === "") {
    ElMessage.error("审核备注不能为空");
    return;
  }

  const obj = {
    approvalStatus: auditResult.value,
    workOrderId: applyId.value,
    auditRemark: auditRemark.value,
  };

  try {
    loadingCheck.value = true;
    const res = await checkWorkApi(obj);
    auditDialogShow.value = false;

    //loadingCheck.value =false;

    if (res.code === 200) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
      return;
    }
    loadingCheck.value = false;
    emit("update:projectAddShow", false);
    emit("refreshList", false);
  } catch (error) {
    loadingCheck.value = false;
    emit("update:projectAddShow", false);
    emit("refreshList", false);
    // ElMessage.error(error);
  }
};

const closeAudit = () => {
  auditRemark.value = "";
  auditResult.value = "";
  applyId.value = "";
  auditDialogShow.value = false;
};

/**
 * @description: 保存
 * @param {Object} customerFormRef 客户表单引用
 */
const handleAddSave = async (projectFormRef, type) => {
  // if (type && props.pageType === "edit") {
  //   return handleCheckBtn(projectFormRef, 1, "提交");
  // }
  if (!projectFormRef) return;
  if (!projectForm.value.concatList.length) {
    return ElMessage.warning("请添加防区点位负责联系人");
  }
  await projectFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          console.log("ZZZZZZZZZ", projectForm.value)
          let res = await addWorkApplyApi(projectForm.value);
          if (res.code === 200) {
            emit("update:projectAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};
/**
 * @description: 处理销售类目选择
 * @param {Number} value 当前值
 */
const handleSaleCategory = (value) => {
  saleCategoryList.value.forEach((item) => {
    if (item.value === value) {
      saleForm.value.saleCategoryName = item.label;
    }
  });
  const obj = {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    quantity: null,
  };
  saleForm.value = { ...saleForm.value, ...obj };
};

/**
 * @description: 处理审核状态相关按钮
 * @param {String} type  类型
 * @param {String} title 标题
 */
const handleCheckBtn = (projectFormRef, type, title) => {
  ElMessageBox.confirm(`确定${title}以上数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      const obj = {
        approvalStatus: type,
        projectId: projectForm.value.projectId,
        workOrderId: projectForm.value.workOrderId,
      };
      const res = await checkWorkApi(obj);
      if (res.code === 200) {
        emit("updateFollowAddShow", false);
        emit("update:projectAddShow", false);
        emit("refreshList", false);
        ElMessage.success(res.msg);
        projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

/**
 * @description: 返回
 */
const handleBack = () => {
  if (props.pageType === "detail" || props.pageType === "check") {
    emit("updateFollowAddShow", false);
    emit("update:projectAddShow", false);
    projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
  } else {
    ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass: "confirmBtnClass",
      cancelButtonClass: "cancelBtnClass",
    })
      .then(async () => {
        emit("update:projectAddShow", false);
        projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
      })
      .catch(() => {});
  }
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response) {
  impleForm.value.suppFileInfoVos.push({ ...response, businessType: 16 });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  impleForm.value.suppFileInfoVos.splice(index, 1);
}

/**
 * @description: 新增、编辑销售清单
 * @param {Object} saleFormRef 联售清单引用
 */
const handleSaleAdd = async (saleFormRef) => {
  if (!saleFormRef) return;
  await saleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.concatList[tableIndexSec.value] =
          JSON.parse(JSON.stringify(saleForm.value));
      } else {
        projectForm.value.concatList.push(
          JSON.parse(JSON.stringify({ ...saleForm.value }))
        );
      }
      saleForm.value = {
        brand: "",
        materialId: null,
        materialUnit: null,
        materialUnitName: "",
        platformName: "",
        technologyParameter: "",
        projectId: null,
        projectSaleId: null,
        quantity: null,
        remarks: "",
        saleCategory: null,
        saleCategoryName: "",
        saleName: "",
      };
      //   contactAddShow.value = false;
      saleFormRef.resetFields();
      // nextTick(() => {
      //   refSelect.value.focus(); // 聚焦
      // });
      operateDialogShow.value = false;
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 处理销售清单操作
 */
const handleSaleOperate = () => {
  operateDialogShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    refSelect.value.focus(); // 聚焦
  });
};

/**
 * @description: 销售清单返回
 */
const handleSaleBack = () => {
  // saleAddShow.value = false;
  operateDialogShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理省市区操作
 * @param {String} type 类型
 */
const handleProvince = (type) => {
  switch (type) {
    case "province":
      cityList.value = [];
      areaList.value = [];
      projectForm.value.city = null;
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.province).then((res) => {
        if (res.code === 200) {
          cityList.value = res.data;
        }
      });
      break;
    case "city":
      areaList.value = [];
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.city).then((res) => {
        if (res.code === 200) {
          areaList.value = res.data;
        }
      });
      break;
  }
};

const getincludeContract = (value) => {

}

/**
 * @description: 处理项目选择
 */
const handleProjectChange = (value) => {
  console.log("AAAA", value)
  // projectForm.value.projectTaskDetailIds = [];
  getPorjectPointList();

  if (value) {
    getSelectProjectInfoApi(value).then(res => {
      console.log("VVVV", res)
      if(res) {
        projectTableVisible.value = res.projectInfoRespVo;
      }
    })
    projectTableVisible.value = true;
    const project = projectList.value.find((item) => item.projectId === value);
    // if (project) {
    //   projectForm.value.projectCode = project.projectCode;
    // }
  } else {
    projectTableVisible.value = false;
    // projectForm.value.projectCode = "";
  }
};

/**
 * @description: 处理销售清单表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperateSec = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndexSec.value = tabIndex;
    saleForm.value = JSON.parse(JSON.stringify(row));
    // saleAddShow.value = true;
    operateDialogShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refSelect.value.focus(); // 聚焦
    });
  } else {
    ElMessageBox.confirm('此操作将删除该联系人，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtnClass',
        cancelButtonClass: 'cancelBtnClass',
        type: 'warning',
      })
        .then(async () => {
          projectForm.value.concatList.splice(tabIndex, 1);
        })
        .catch(() => {})
    
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {


    detailInfoShow.value = true;



    const res = await getWorkApplyDetailApi(id);
    projectForm.value = res;

    setTimeout(() => {
      const selectDept = deptList.value.find(
        (dept) => dept.deptId === projectForm.value.businessDeptId
      );
      getUserListApi(selectDept.deptType).then((res) => {
        if (res) {
          userList.value = res;
        }
      });
    }, 1000);

    if (projectForm.value.armedzoneId) {
      // getArmedzoneDevice();
      // getPorjectPointList();
      if(res.projectTaskDetailInfoRespVos!=null&&res.projectTaskDetailInfoRespVos.length){

        // projectForm.value.projectTaskDetailIds =
        //   res.projectTaskDetailInfoRespVos.map(
        //     (item) => item.projectTaskDetailId
        //   );
      }
    }

    getEvaluateList();

    const resAudit = await selectAuditList(id);
    auditList.value = resAudit.data;
    if (resAudit.data.length) {
      flowInfoList.value = resAudit.data[0].chartVo.flowList;
      flowingStep.value = resAudit.data[0].chartVo.flowingStep;
    }

    await getProvinceApi(projectForm.value.province).then((res) => {
      if (res.code === 200) {
        cityList.value = res.data;
      }
    });
    await getProvinceApi(projectForm.value.city).then((res) => {
      if (res.code === 200) {
        areaList.value = res.data;
      }
    });
    if (res.mainOperationListRespVos.length) {
      const info = res.mainOperationListRespVos;
      impleList.value = res.mainOperationListRespVos || [];
      info.forEach((item) => {
        if (item.operationType === 0) {
          impleForm.value = {
            ...item,
            suppFileInfoVos: item.suppFileInfoVos ? item.suppFileInfoVos : [],
          };
        }
        if (item.operationType === 3) {
          constForm.value = {
            ...item,
            suppFileInfoVos: item.suppFileInfoVos ? item.suppFileInfoVos : [],
          };
        }
      });
    }

 
    setTimeout(() => {
      detailInfoShow.value = false;
    }, 500);
  } catch (error) {
    detailInfoShow.value = false;
  }
};
/**
 * @description: 处理部门选择
 * @param {Number} value 当前值
 */
const handleDepart = async (value, flag = true) => {
  if (flag) {
    projectForm.value.userId = null;
  }
  if (value) {
   
    const selectDept = deptList.value.find((dept) => dept.deptId === value);
    // 打印所选部门信息
    if (selectDept) {
      await getUserListApi(selectDept.deptType).then((res) => {
        if (res) {
          userList.value = res;
        }
      });
    } else {
      userList.value = [];
    }
  } else {
    userList.value = [];
  }
};
// 设备列表
const getArmedzoneDevice = () => {
  projectForm.value.armedzoneName = "";
  if (projectForm.value.armedzoneId) {
    getArmedzoneDeviceApi(projectForm.value.armedzoneId).then((res) => {
      deviceList.value = res;
    });
    defenseList.value.forEach((item) => {
      if (item.id === projectForm.value.armedzoneId) {
        projectForm.value.armedzoneName = item.armedzoneName;
      }
    });
  } else {
    deviceList.value = [];
  }
};

// 点位列表
const getPorjectPointList = () => {
  if (projectForm.value.projectId) {
    // getPorjectPointListApi(projectForm.value.projectId).then((res) => {
    //   pointList.value = res;
    // });
  } else {
    pointList.value = [];
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  //防区下拉
  // await getArmedzoneInfoVoListApi().then((res) => {
  //   defenseList.value = res;
  //   console.log("defenseList.value", defenseList.value)
  // });

  // 项目列表
  await getProjectListApi().then((res) => {
    if (res) {
      projectList.value = res;
    }
  });
  // 工单类型
  await getDictsApi("erp_work_order_type").then((res) => {
    if (res.code === 200) {
      typeList.value = res.data;
    }
  });
  // // 用户
  // await getUserListApi(null).then((res) => {
  //   if (res) {
  //     userList.value = res;
  //   }
  // });
  // 省
  await getProvinceApi(1).then((res) => {
    if (res.code === 200) {
      provinceList.value = res.data;
    }
  });
  //部门
  await getDeptListApi().then((res) => {
    if (res.code === 200) {
      console.log('部门')
      console.log(res)
      deptList.value = res.data.filter(item => item.parentId === 100 || item.deptId === 100);
    }
  });
}

onMounted(() => {
  getDicts();
  /*nextTick(() => {
    refInput.value.focus(); // 聚焦
  });*/
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}
.projectAdd {
  padding: 20px 20px 0 20px;
  width: 100%;
  height: 100%;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .project-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }
  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-form-item--default) {
    margin-bottom: 22px;
  }
  :deep(.el-form-item--default .el-form-item__error) {
    padding-top: 5px;
  }
  .item {
    margin-bottom: 10px;
    color: #929292;
  }
  .title {
    margin-right: 10px;
  }
  .header {
    color: #3399ff;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
.search-input {
  width: 268px;
  height: 34px;
}
.el-table {
  border: var(--el-table-border);
}
</style>
